import { Input, List, Avatar, Typography, Divider, Space } from 'antd';
import { useState, useRef, useEffect } from 'react';
import { SendOutlined, UserOutlined, RobotOutlined } from '@ant-design/icons';

interface Message {
  id: number;
  type: 'user' | 'ai';
  content: string;
}

const Chat = () => {
  const [messages, setMessages] = useState<Message[]>([]);
  const [inputValue, setInputValue] = useState('');

  const handleSend = () => {
    if (!inputValue.trim()) return;

    // 添加用户消息
    const userMessage: Message = {
      id: Date.now(),
      type: 'user',
      content: inputValue.trim(),
    };

    setMessages([...messages, userMessage]);
    setInputValue('');

    // TODO: 发送消息到AI服务并获取响应
    setTimeout(() => {
      const aiMessage: Message = {
        id: Date.now(),
        type: 'ai',
        content: '这是一个模拟的AI响应',
      };
      setMessages(prev => [...prev, aiMessage]);
    }, 1000);
  };

  const messagesEndRef = useRef<HTMLDivElement>(null);

  // 自动滚动到最新消息
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', backgroundColor: '#fff' }}>
      {/* 标题栏 */}
      <div style={{ height: '48px', display: 'flex', flexDirection: 'row', alignItems: 'center', borderBottom: '1px solid #f0f0f0', padding: '0 16px' }}>
        <Avatar icon={<RobotOutlined />} style={{ backgroundColor: '#1677ff' }} />
        <Typography.Title level={5} style={{ margin: '0 8px' }}>AI 助手</Typography.Title>
      </div>
      
      {/* 消息列表区域 */}
      <div style={{ flex: 1, overflowY: 'auto', padding: '16px', display: 'flex', flexDirection: 'column' }}>
        <List
          itemLayout="horizontal"
          dataSource={messages}
          renderItem={(message) => (
            <List.Item style={{ padding: '8px 0', border: 'none' }}>
              <div style={{
                display: 'flex',
                flexDirection: message.type === 'user' ? 'row-reverse' : 'row',
                width: '100%'
              }}>
                <Avatar 
                  icon={message.type === 'user' ? <UserOutlined /> : <RobotOutlined />}
                  style={{
                    backgroundColor: message.type === 'user' ? '#52c41a' : '#1677ff',
                    marginRight: message.type === 'user' ? 0 : '12px',
                    marginLeft: message.type === 'user' ? '12px' : 0
                  }}
                />
                <div style={{
                  maxWidth: '70%',
                  backgroundColor: message.type === 'user' ? '#f0f7ff' : '#f5f5f5',
                  padding: '8px 12px',
                  borderRadius: '8px',
                  wordBreak: 'break-word'
                }}>
                  {message.content}
                </div>
              </div>
            </List.Item>
          )}
        />
        <div ref={messagesEndRef} />
      </div>
      
      {/* 底部输入框 */}
      <div style={{ padding: '16px', borderTop: '1px solid #f0f0f0' }}>
        <Input
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onPressEnter={(e) => {
            if (!e.shiftKey) {
              e.preventDefault();
              handleSend();
            }
          }}
          placeholder="输入消息与AI对话..."
          style={{ borderRadius: '8px' }}
          suffix={
            <SendOutlined
              style={{ 
                cursor: 'pointer', 
                color: inputValue.trim() ? '#1677ff' : '#d9d9d9',
                fontSize: '18px' 
              }}
              onClick={handleSend}
            />
          }
        />
      </div>
    </div>
  );
};

export default Chat;